<template>
  <div id="myChart" style="width: 1000px;height:600px;"></div>
</template>
<script>
export default {
data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      xdata:[],
      yaddData:[],
      yupdateDate:[],
      ydelDate:[]
    }
  },
  mounted(){
    var d=new Date();
    // var data=new Date();
    // var currentYearMonth=date.getFullYear+'-'+(date.getMonth+1);
    
    var _this = this;
    this.$http.get('/api/cs/operLog/operLogShowByMonth?yearMonth=2020-12')
        .then(function (response) {
            //正确请求时，回调函数
            console.log("=========");
            console.log(response);
            if(response.data.code==2000){
                var showDate=response.data.data;
                showDate.forEach(element => {
                        _this.xdata.push(element.monthDay);
                        _this.yaddData.push(element.addOper);
                        _this.yupdateDate.push(element.updateOper);
                        _this.ydelDate.push(element.delOper);
                });
            }else{
                console.log("==========");
            }
        })
        .catch(function (error) {
            //失败处理
            console.log(error);
            console.log("==========");
         });
        console.log(this.xdata);
        console.log(this.ydelDate);
        this.drawLine();
  },
  methods: {
    
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: {
        text: '网站操作日志统计展示',
        subtext: '完全真实数据'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['添加操作', '修改操作','删除操作']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.xdata
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value}'
        }
    },
    series: [
        {
            name: '添加操作',
            type: 'line',
            data: this.yaddData,
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name: '修改操作',
            type: 'line',
            data: this.yupdateDate,
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            position: 'start',
                            formatter: '最大值'
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        },
        {
            name: '删除操作',
            type: 'line',
            data: this.ydelDate,
            markPoint: {
                data: [
                    {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'},
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            position: 'start',
                            formatter: '最大值'
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        }
    ]

        });
    }
  }
}
</script>
